<template>
  <div class="container">
    <!--      搜索框-->
    <div class="topBar">
      <div class="search">
        <div class="weui-search-bar">
          <div class="weui-search-bar__form">
            <div class="weui-search-bar__box">
              <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
              <input type="text" class="weui-search-bar__input" :placeholder="placeholder" v-model="inputValue" :focus="isFocusData" :confirm-type="confirmType" @input="input" @blur="blur" @focus="focus" @confirm="confirm" />
              <div class="weui-icon-clear" v-if="inputValue.length > 0" @click="clearInput">
                <icon type="clear" size="14"></icon>
              </div>
            </div>
            <label class="weui-search-bar__label" :hidden="isFocusData" @click="showInput">
              <icon class="weui-icon-search" type="search" size="14"></icon>
              <div class="weui-search-bar__text">搜索感兴趣的主题</div>
            </label>
          </div>
          <div class="weui-search-bar__cancel-btn" :hidden="!isFocusData" @click="hideInput">取消</div>
        </div>
      </div>
    </div>
    <!--      主题列表-->
    <div v-for="(item, index) in themeArr" :key="index">
      <i-cell-group>
        <i-cell is-link :url="'/pages/theme_detail/main?topicId=' + item.id">
          <p style="font-size: 15pt; color: #000000">{{item.name}}</p>
          <p style="font-size: 12px; color: #657180">共有{{item.count}}句</p>
        </i-cell>
      </i-cell-group>
    </div>
  </div>
</template>


<script>
  import mpSearchbar from 'mpvue-weui/src/searchbar'
  export default {
    data () {
      return {
        URL: this.GLOBAL.apiUrl, // 服务器地址
        themeArr: [], // 存放主题列表
        index: 0, // 标识数组下标用于页面间跳转参数传递
        inputValue: this.value, // 输入框初始值
        isFocusData: this.isFocus // 输入框初始值
      }
    },
    beforeMount () {
      this.$fly.get(this.URL + 'topic/getTopic')
        .then((response) => {
          let themeArr = response.data.data
          this.$store.dispatch('getThemeArr', themeArr)
          this.themeArr = themeArr
        })
        .catch((error) => {
          console.log(error)
        })
    },
    components: {
      mpSearchbar
    },
    props: {
      value: {
        type: [String, Number],
        default: ''
      },
      isFocus: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: '搜索'
      },
      confirmType: {
        type: String,
        default: 'done'
      }
    },
    watch: {
      value (val) {
        this.inputValue = val
      },
      inputValue (val) {
        this.$emit('input', val)
        this.search(val)
      }
    },
    methods: {
      search (val) {
        // 将输入框的内容实时发送到服务器获取数据
        let _that = this
        wx.request({
          url: _that.URL + 'topic/getTopicByName',
          method: 'POST',
          data: {
            name: val
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          success (res) {
            let themeArr = res.data.data
            _that.$store.dispatch('getThemeArr', themeArr)
            _that.themeArr = themeArr
          }
        })
      },
      showInput () {
        this.isFocusData = true
      },
      hideInput () {
        this.inputValue = ''
        this.isFocusData = false
      },
      clearInput () {
        this.inputValue = ''
      },
      /* 键盘输入时触发 */
      input (e) {
        this.$emit('on-input', e)
      },
      /* 输入框失去焦点时触发 */
      blur (e) {
        this.$emit('blur', e)
      },
      /* 输入框聚焦时触发 */
      focus (e) {
        this.$emit('focus', e)
      },
      /* 点击完成时触发 */
      confirm (e) {
        this.$emit('confirm', e)
      }
    }
  }
</script>

<style scoped>

</style>
